<template>
    <transition name="move">
        <div class="mineService" v-show="mineServiceFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <scroll class="mine-service-container" :data="serviceDetail">
                <div>
                    <ul class="mine-service-item">
                        <li class="mine-service-list" v-for="(item, index) in serviceDetail" :key="index">
                            <img class="item-img" :src="item.img" alt="" />
                            <p class="item-title">{{item.title}}</p>
                        </li>
                    </ul>
                </div>
                <!-- 请求数据loading -->
                <!-- <div class="loading-wrapper" v-show="!serviceDetail.length">
                    <loading></loading>
                </div> -->
            </scroll>
            <!-- 暂无志愿服务信息 -->
            <div class="mine-service-none" v-show="!serviceDetail.length">
                <a href="javascript:;" class="mine-service-none-btn"></a>
            </div>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'

    export default {
        data () {
            return {
                title: "志愿服务",
                returnShow: true,
                mineServiceFlag: false,
                serviceDetail: []
            }
        },
        methods: {
            show () {
                this.mineServiceFlag = true
            },
            hide () {
                this.mineServiceFlag = false
            },
            // 获取信息
            getServiceInfo () {
                axios.get('./static/serviceDetail.json').then((res) => {
                    res = res.data.data
                    this.serviceDetail = res.serviceList
                    // console.log(this.serviceDetail)
                })
            }
        },
        components: {MTitle,Loading,Scroll},
        created () {
            // this.getServiceInfo()
        }
    }
</script>

<style lang="stylus">
    @import '~common/stylus/mixins.styl'
    
    .mineService
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        background: #fff
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .mine-service-none
            position: absolute
            width: 100%
            top: 50%
            transform: translateY(-50%)
            z-index: 9
            .mine-service-none-btn
                background: url('./icon1.png') no-repeat
                width: 172px
                height: 36px
                background-size: 100% 100%
                display: block
                margin: 0 auto
        .mine-service-container
            position: absolute
            width: 100%
            top: 56px
            bottom: 0px
            background: #fff
            padding: 0 15px
            box-sizing: border-box
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .mine-service-item
                width: 100%
                .mine-service-list
                    width: 100%
                    height: 217px
                    margin-bottom: 20px
                    font-size: 0
                    .item-img
                        width: 100%
                        height: 180px
                        border-top-left-radius: 6px
                        border-top-right-radius: 6px
                    .item-title
                        width: 100%
                        height: 37px
                        background: #0094d4
                        color: #fff
                        line-height: 37px
                        font-size: 16px
                        padding: 0 10px
                        box-sizing: border-box
                        margin-top: -6px
                        z-index: 2
                        position: relative
                        border-bottom-left-radius: 6px
                        border-bottom-right-radius: 6px
                        ellipsis()
                        
                    
</style>